<template>
	<view class="box">
		<view :class="[mode==='horizontal'?'vertical':'horizontal']">
			<canvas canvas-id="canvasId" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
				:style="{width: width+'px', height: height+'px'}" style="background-color: #ffffff;"></canvas>
			<view class="bottom">
				<view class="bot_text" :style="{color:textColor}">{{text}}</view>
				<view class="btn">
					<button class="clear" :style="{color:clearColor,background:clearBgColor}"
						@click="clear">{{clearText}}</button>
					<button class="save" :style="{color:saveColor,background:saveBgColor}"
						@click="save">{{saveText}}</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				width: '',
				height: '',
				ctx: '',
				moveX: '',
				moveY: '',
			};
		},
		props: {
			color: {
				type: String,
				default: "#000"
			},
			size: {
				type: Number,
				default: 4
			},
			mode: {
				type: String,
				default: "horizontal"
			},
			upload: {
				type: Boolean,
				default: false
			},
			text: {
				type: String,
				default: "请在输入框内签名"
			},
			textColor: {
				type: String,
				default: "#999"
			},
			clearText: {
				type: String,
				default: "清空"
			},
			clearColor: {
				type: String,
				default: "#fff"
			},
			clearBgColor: {
				type: String,
				default: "#F56C6C"
			},
			saveText: {
				type: String,
				default: "保存"
			},
			saveColor: {
				type: String,
				default: "#fff"
			},
			saveBgColor: {
				type: String,
				default: "#409EFF"
			}
		},
		watch: {
			mode(e) {
				if (e == 'horizontal') {
					let width = uni.getSystemInfoSync().windowWidth
					let height = uni.getSystemInfoSync().windowHeight - 130
					console.log(height, "!!!!!");
					// 计算画板的高宽
					this.width = width - 4
					this.height = height * 0.3
				} else {
					let width = uni.getSystemInfoSync().windowWidth
					let height = uni.getSystemInfoSync().windowHeight - 13
					console.log(height, "--------");
					// 计算画板的高宽
					this.width = width - 4
					this.height = height * 0.99
				}
			}
		},
		mounted() {
			// 获取屏幕宽高
			if (this.mode == 'horizontal') {
				let width = uni.getSystemInfoSync().windowWidth
				let height = uni.getSystemInfoSync().windowHeight - 130
				console.log(height, "!!!!!");
				// 计算画板的高宽
				this.width = width - 4
				this.height = height * 0.3
			} else {
				let width = uni.getSystemInfoSync().windowWidth
				let height = uni.getSystemInfoSync().windowHeight - 13
				console.log(height, "--------");
				// 计算画板的高宽
				this.width = width - 4
				this.height = height * 0.99
			}

			this.ctx = uni.createCanvasContext("canvasId", this)
			this.ctx.setLineWidth(this.$props.size)
			this.ctx.setStrokeStyle(this.$props.color)
			this.ctx.setFillStyle("#fff")
			this.ctx.fillRect(0, 0, this.width, this.height)
			this.ctx.draw(true);
			
			this.ctx.lineCap = 'round'
			this.ctx.lineJoin = 'round'
		},
		methods: {
			handleTouchStart(e) {
				// console.log(e);
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				this.ctx.beginPath()
				this.ctx.moveTo(startX, startY)
				this.moveX = ''
				this.moveY = ''
			},
			handleTouchMove(e) {
				// console.log(e);
				let movesX = e.changedTouches[0].x;
				let movesY = e.changedTouches[0].y;
				// 防止线条出现断点
				if (this.moveX && this.moveY) {
					this.ctx.moveTo(this.moveX, this.moveY)
					this.ctx.lineTo(this.moveX, this.moveY)
				}
				this.ctx.lineTo(movesX, movesY)
				this.moveX = movesX
				this.moveY = movesY
				this.ctx.stroke()
				this.ctx.draw(true)

			},

			clear() {
				this.ctx.clearRect(0, 0, this.width, this.height);
				this.ctx.draw();
				this.ctx.setLineWidth(this.$props.size)
				// uni.showToast({
				// 	icon: "none",
				// 	title: "已清空"
				// })
			},
			rotate() {
				// this.ctx.translate()
				this.ctx.rotate(90 * Math.PI / 180)
			},
			saveImage() {

				const that = this;
				if (that.moveX == 0 && that.moveY == 0) {
					uni.showToast({
						icon: "none",
						title: "请先签名"
					})
					return false;
				}
				const whWidth = uni.getSystemInfoSync().windowWidth - 4
				const wvWidth = (uni.getSystemInfoSync().windowWidth - 13) * 0.99
				const hhHeight = (uni.getSystemInfoSync().windowHeight - 130) * 0.3
				const hvHeight = uni.getSystemInfoSync().windowHeight - 4
				const wWidth = uni.getSystemInfoSync().windowWidth
				const wHeight = uni.getSystemInfoSync().windowHeight

				const width = that.mode == 'horizontal' ? whWidth : wvWidth
				const height = that.mode == 'horizontal' ? hhHeight : hvHeight

				console.log(width, height);

				uni.canvasToTempFilePath({
					canvasId: 'canvasId',
					destWidth: width,
					destHeight: height,
					fileType: 'jpg',
					success: function(res) {
						let path = res.tempFilePath;
						if (that.upload) {
							that.$emit("onSign", res.tempFilePath)
						} else {
							uni.showLoading({
								title: '正在保存图片...'
							});
							setTimeout(() => {
								// #ifdef APP-PLUS||MP-WEIXIN
								uni.saveImageToPhotosAlbum({
									filePath: path,
									success() {
										uni.showToast({
											icon: "none",
											title: "已保存到相册"
										})
									},
									fail() {
										uni.showToast({
											icon: "none",
											title: "已取消"
										})
									}
								})
								// #endif

								// #ifdef H5
								const bytes = atob(path.split(',')[1]);
								const ab = new ArrayBuffer(bytes.length);
								const ia = new Uint8Array(ab);
								for (let i = 0; i < bytes.length; i++) {
									ia[i] = bytes.charCodeAt(i);
								}

								const blob = new Blob([ab], {
									type: 'image/png'
								});
								const url = URL.createObjectURL(blob);

								const link = document.createElement('a');
								link.href = url;
								link.download = 'image.png';
								link.click();
								uni.showToast({
									icon: "none",
									title: "已保存到相册"
								})
								// #endif
								uni.hideLoading()
							}, 2000)
						}

					},
					fail(err) {
						console.log(err);
					}
				}, that)
			},

			save() {

				this.saveImage()

			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		.vertical {
			height: 90%;

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;

				.bot_text {
					font-size: 30rpx;
					color: #999;
				}

				.btn {
					display: flex;
					align-items: center;

					.save {
						font-size: 28rpx;
						background: #409EFF;
						color: #fff;
						padding: 0 30rpx;
						margin-left: 30rpx;
					}

					.clear {
						font-size: 28rpx;
						background: #F56C6C;
						color: #fff;
						padding: 0 30rpx;
						margin: 0;
					}
				}
			}

			canvas {
				border: 2px dashed #DCDFE6;
			}
		}

		.horizontal {
			display: flex;
			flex-direction: row-reverse;

			.bottom {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				padding: 140rpx 20rpx;
				box-sizing: border-box;
				width: 15%;

				.bot_text {
					font-size: 30rpx;
					color: #999;
					width: max-content;
					transform: rotate(90deg);
				}

				.btn {
					display: flex;
					margin-top: 15px;
					transform: rotate(90deg);

					.save {
						font-size: 28rpx;
						background: #409EFF;
						color: #fff;
						width: 120rpx;
						margin-left: 30rpx;
					}

					.clear {
						font-size: 28rpx;
						background: #F56C6C;
						color: #fff;
						width: 120rpx;
						margin: 0;
					}
				}
			}

			canvas {
				border: 2px dashed #DCDFE6;
			}
		}
	}
</style>